{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>发布文章</title>
  <link rel="stylesheet" href="{% static 'assets/css/amazeui.css' %}" />
</head>
<body>
<div class="layout">
<form method="post" enctype="multipart/form-data" class="am-form" data-am-validator>
    {% csrf_token %}
  <fieldset>
    <div class="am-form-group">
      <div class="am-g">
      <label for="doc-ta-1">文章标题</label>
      <input type="text" name="title" id="doc-vld-name-2" minlength="2" placeholder="标题" required/>
     </div>
    </div>

{% for item in category %}
    <div class="am-radio">
      <label>
        <input type="radio" name="cateid" value="{{ item.id }}" checked>
        {{ item.c_name }}
      </label>
    </div>
    {% endfor %}

    <div class="am-form-group">
      <label for="doc-ta-1">内容</label>
      <textarea name="content" rows="5" id="doc-ta-1"></textarea>
    </div>

      <div class="am-form-group am-form-file">

   <button type="button" class="am-btn am-btn-danger am-btn-sm">
    <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
  <input id="doc-form-file" name="image" type="file" multiple>
</div>
<div id="file-list"></div>
<script type="text/javascript">
  $(function() {
    $('#doc-form-file').on('change', function() {
      var fileNames = '';
      $.each(this.files, function() {
        fileNames += '<span class="am-badge">' + this.name + '</span> ';
      });
      $('#file-list').html(fileNames);
    });
  });
</script>

    <p><button type="submit" class="am-btn am-btn-default">提交</button></p>
  </fieldset>
</form>
</div>
</body>
</html>